"use strict";
import React from "react";
import ReactDOM from "react-dom";
import { History, Lifecycle } from "react-router";
import Reflux from "reflux";
import $ from "jquery";
import _ from "lodash";

import { CONFIG } from "../common/config.js";
import { GOTOMixin } from "./mixins.jsx";
import { UserActions } from "../action/useraction.js";
import { UserStore } from "../store/userstore.js";


var PageLogin = React.createClass({
	mixins: [History, Reflux.connect(UserStore, "data") ], 
	getInitialState: function(){		
		var val = UserStore.rememberInfo();
		val.clearMessage = false;

		return val;
	},
	componentDidMount: function(){
		$('body').attr('class', 'page_login');
		$('#app').attr('class', '');
	},
	componentWillUnmount: function(){
		$('body').attr('class', '');
	},
	onLoginClick: function(){
		if(this.state.username == ''){
			return;
		}
		this.setState({clearMessage: false});
		UserActions.login(this.state.username, this.state.password, this.state.remember);
	},
	checkBoxClick: function(){
		this.setState({remember:!this.state.remember});
	},
	onInputChange: function(event){
		var name = event.target.name;
		var value = event.target.value.trim();
		this.setState({[name]: value});
		this.setState({clearMessage: true});
	},
	render: function(){
		if(this.state.data != null && this.state.data.err == null){
			window.location.hash = '/index';
		}
		var info = "您正在登录平安舵手数据分析平台";
		if(this.state.clearMessage==false && this.state.data != null){
			info = '';
			if(this.state.data.err){
				info = "[" + this.state.data.err + "]:"
			}
			info = info + this.state.data.message;
		}
		// <div className="checkbox" style={{display: "inline-block", margin: '10px 0 0px 10px'}}> 
		// <label> <input type="checkbox" checked={this.state.remember} onChange={this.checkBoxClick}/>记住用户名</label> 
		// </div>
		return (
	<div id="container" className="container">
		<div id="page_main">
			<div className="logo"></div>
			<div className="login_main">
				<div className="title">请输入您的um用户名和密码</div>
				<div className="name">
					<input onChange={this.onInputChange} type="text" id="name" name="username" value={this.state.username} placeholder="用户名或者电子邮箱"/>
				</div>
				<div className="pwd">
					<input onChange={this.onInputChange} type="password" id="pwd" name="password" value={this.state.password} placeholder={"输入密码"}/>
				</div>
				<div className="rem">
					<div id="btn-login" className="control btn btn-primary" onTouchTap={this.onLoginClick}>登 录</div>
				</div>
				<div className="info">{info}</div>
			</div>
			<div className="company_info">
				<div className="company_logo"></div>
			</div>
		</div>
	</div>
		)
	}	
})

export { PageLogin }